<template>
  <!-- 布局容器 -->
  <el-container class="container">
    <!-- 头部 -->
    <el-header class="header">Header</el-header>
    <el-container>
      <!-- 左边 -->
      <el-aside width="200px" class="aside">
        <!-- <router-link to="/testa">testa</router-link>
        <br />
        <router-link to="/testb">testb</router-link> -->

        <!-- 菜单组件
           el-menu
              default-active:默认选中哪一个菜单
              router:是否开启路由模式,默认值是false
                 如果变成true,点击菜单项,菜单项的index的值就是路由的跳转地址
              el-menu-item:用于配制单层菜单的
                默认插槽:用于icon图标显示
                具名插槽(title):菜单的标题 
                index的值与el-menu的default-active对应的 
                index就是点击该项后对应的值               
              el-submenu:用于多层菜单(有子集)
                 具名插槽(title):用于配制当前项的图标与内容
                 默认插槽(el-menu-item):内部子集
                  
         -->
        <el-button @click="goTestA">跳转到testa</el-button>
        <el-button @click="goTestB">跳转到testb</el-button>
        <el-menu default-active="3" class="el-menu-vertical-demo" router>
          <el-menu-item index="/testa">
            <i class="el-icon-menu"></i>
            <template #title>首页</template>
          </el-menu-item>
          <el-submenu index="1">
            <template #title>
              <i class="el-icon-location"></i>
              <span>文章管理</span>
            </template>
            <el-menu-item index="1-3">
              <i class="el-icon-location"></i>
              <template #title>
                文章分类
              </template>
            </el-menu-item>
            <el-menu-item index="1-4">
              <i class="el-icon-location"></i>
              <template #title>
                文章列表
              </template>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="/testb">
            <i class="el-icon-menu"></i>
            <template #title>导航二</template>
            <!-- <span slot="title">导航二</span> -->
          </el-menu-item>
          <!-- 个人中心 -->
          <el-submenu index="5">
            <template #title>
              <i class="el-icon-location"></i>
              <span>个人中心</span>
            </template>
            <el-menu-item index="5-1">
              <i class="el-icon-location"></i>
              <template #title>
                基本资料
              </template>
            </el-menu-item>
            <el-menu-item index="5-2">
              <i class="el-icon-location"></i>
              <template #title>
                更换头像
              </template>
            </el-menu-item>
            <el-menu-item index="5-3">
              <i class="el-icon-location"></i>
              <template #title>
                重置密码
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- main内容 -->
        <el-main class="main">
          <!-- 加入路由出口 -->
          <router-view></router-view>
        </el-main>
        <!-- 底部 -->
        <el-footer class="footer">Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
export default {
  methods: {
    goTestA () {
      this.$router.push('/testa/123')
    },
    goTestB () {
      // this.$router.push('/testb')
      this.$router.push({
        name: 'testb',
        // query: {
        //   abc: 123
        // }
        params: {
          xxx: [1, 2, 3, 4, 5, 6]
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  height: 100%;
}
.header {
  height: 60px;
  background-color: #999;
}
.aside {
  height: 100%;
  background-color: #ccc;
}
.main {
  background-color: #000;
}
.footer {
  background-color: orange;
}
</style>
